<template>
  <div :class="record.options.optionsColor ? 'multiple' : ''">
    <a-select
      :disabled="disabled"
      v-model="data"
      :allowClear="true"
      @change="onChange"
      :placeholder="record.options.placeholder"
      :size="record.options.size"
      :mode="record.options.multiple ? 'multiple' : ''"
    >
      <a-select-option
        :value="item.value"
        :key="index"
        v-for="(item, index) in record.options.options"
      >
        <span
          v-if="record.options.optionsColor"
          class="eip-color-btn"
          :style="{ 'background-color': item.color }"
        >
          {{ item.label }}
        </span>

        <span v-else>
          {{ item.label }}
        </span>
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: "eselect",
  data() {
    return {
      data: undefined,
    };
  },
  props: ["value", "record", "disabled"],
  watch: {
    value(value) {
      if (value) {
        this.data = value;
      }
    },
  },
  methods: {
    onChange(value) {
      this.$emit("change", value);
    },
  },
};
</script>
<style lang="less" scoped>
.multiple {
  /deep/ .ant-select-selection--multiple .ant-select-selection__choice {
    padding: 0 20px 0 0px !important;
    border-radius: 18px !important;
  }
}
</style>
